<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>志愿填报</span>
      </div>
      <div class="text item">
        <el-form :model="volunteerForm" ref="volunteerForm" label-width="100px">
          <!-- 考生信息 -->
          <el-form-item label="考生姓名">
            <el-input v-model="volunteerForm.studentInfo.name" placeholder="请输入考生姓名"></el-input>
          </el-form-item>
          <el-form-item label="考生号">
            <el-input v-model="volunteerForm.studentInfo.no" placeholder="请输入考生号"></el-input>
          </el-form-item>
          <!-- 院校与专业志愿 -->
          <div v-for="(volunteer, index) in volunteerForm.volunteerInfo" :key="index" class="volunteer-item">
            <span class="volunteer-index">志愿 {{ index + 1 }}</span> <!-- 显示当前志愿序号 -->
            <el-form-item label="院校志愿">
              <el-select v-model="volunteer.college" placeholder="请选择院校"  filterable remote clearable :remote-method="handleRemoteSearch" :loading="searchLoading">
                <el-option
                  v-for="college in filteredColleges"
                  :key="college.schoolName"
                  :label="college.schoolName"
                  :value="college.schoolName">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业志愿">
              <el-select v-model="volunteer.major" placeholder="请选择专业" @click="getSpeciality(volunteer.college)">
                <el-option
                  v-for="major in majors"
                  :key="major.specialityName"
                  :label="major.specialityName"
                  :value="major.specialityName">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 操作按钮 -->
            <div class="order-controls">
              <el-button v-if="index > 0" icon="el-icon-arrow-left" @click="moveLeft(index)"></el-button>
              <el-button v-if="index < volunteerForm.volunteerInfo.length - 1" icon="el-icon-arrow-right" @click="moveRight(index)"></el-button>
              <el-button type="danger" icon="el-icon-delete" @click="removeVolunteer(index)">删除</el-button>
            </div>
          </div>
          <el-button type="primary" @click="addVolunteer">添加志愿</el-button>
          <el-button type="primary" @click="submitForm">提交志愿</el-button>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getSchoolList,getSpecialityList,addVolunteer} from '@/api/zytb/zytb'
export default {
  name: 'VolunteerFilling',
  data() {
    return {
      volunteerForm: {
        studentInfo: {
          name: '',
          no: ''
        },
        volunteerInfo: []
      },
      colleges: [
      ],
      majors: [],
      searchLoading: false,
      searchKeyword: '',
      filteredColleges: [] // 筛选后的院校列表
    };
  },
  methods: {
    getSchool(){
      getSchoolList().then(res=>{
       this.colleges=res.data
      })
    },
    getSpeciality(schoolName){
      getSpecialityList(schoolName).then(res=>{
        console.log(res.data)
        this.majors= res.data

      })
    },
    addVolunteer() {
      this.volunteerForm.volunteerInfo.push({
        college: '',
        major: ''
      });
    },
    moveLeft(index) {
      if (index > 0) {
        const currentVolunteer = this.volunteerForm.volunteerInfo[index];
        this.volunteerForm.volunteerInfo.splice(index, 1);
        this.volunteerForm.volunteerInfo.splice(index - 1, 0, currentVolunteer);
      }
    },
    moveRight(index) {
      if (index < this.volunteerForm.volunteerInfo.length - 1) {
        const currentVolunteer = this.volunteerForm.volunteerInfo[index];
        this.volunteerForm.volunteerInfo.splice(index, 1);
        this.volunteerForm.volunteerInfo.splice(index + 1, 0, currentVolunteer);
      }
    },
    removeVolunteer(index) {
      this.volunteerForm.volunteerInfo.splice(index, 1);
    },
    submitForm() {
      //传回后端
      addVolunteer(this.volunteerForm).then(res=>{
        alert("填写成功！！！")
      })
      this.$refs.volunteerForm.validate((valid) => {
        if (valid) {
          console.log('提交的志愿信息:', this.volunteerForm);
        } else {
          this.$message.error('请填写完整的志愿信息！');
          return false;
        }
      });
    },
    handleRemoteSearch(query) {
      if (query !== '') {
        this.searchLoading = true;
        // 模拟远程搜索，实际应用中应调用后端API
        setTimeout(() => {
          this.searchLoading = false;
          // 假设我们根据关键字查询到了一些院校
          const searchResults = this.colleges.filter(college =>
            college.schoolName.toLowerCase().includes(query.toLowerCase())
          );
          this.filteredColleges = searchResults;
        }, 500);
      } else {
        // 如果没有搜索关键字，则显示所有院校
        this.filteredColleges = this.colleges;
      }
    }
  },
  created() {
    this.getSchool()
  },
  watch: {
    'volunteerForm.volunteerInfo': {
      handler(newVal) {
        newVal.forEach((volunteer, index) => {
          if (volunteer.college) {
            this.getSpeciality(volunteer.college);
          }
        });
      },
      deep: true
    },
    // 使用 watch 监听搜索关键字的变化
    searchKeyword(newKeyword) {
      if (newKeyword) {
        // 当搜索关键字变化时，进行筛选
        this.filteredColleges = this.colleges.filter(college => {
          return college.schoolName.toLowerCase().includes(newKeyword.toLowerCase());
        });
      } else {
        // 如果搜索关键字为空，则重置筛选后的列表为原始列表
        this.filteredColleges = this.colleges;
      }
    }
  }
};
</script>

<style scoped>
.volunteer-item {
  border: 1px solid #dcdfe6;
  padding: 10px;
  margin-bottom: 10px;
}
.volunteer-index {
  font-weight: bold;
  margin-right: 10px;
}
.order-controls {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
</style>
